<template>
  <div class="apage">
    <el-pagination :style="$store.state.print.devic<750?'fontSize:8px':''" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			:page-sizes="[20,24,30,40]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'aPage',
    props: {
      page: {
        type: Number,
        default: 0
      },
      size: {
        type: Number,
        default: 10
      },
      total: {
        type: Number,
        default: 0
      },

    },
    data() {
      return {
        pagerList: [],
        currentPage: 0,
        Pages: 1,
        pager: 1,
        qu: '',
        currPage:0
      }
    },
    computed: {
      list() {
        let total = this.total
        let li = total / this.size
        let op = Math.floor(li)
        let qu = Math.ceil(li)
        this.qu = qu
        return qu
      }
    },

    methods: {
      tp(val,i){
        if(i>5) return i
      },
      indexClick(i, index) {
        this.pager = i
        this.currentPage = index
        if(this.pager >=6) this.currentPage = 5
        this.$emit('handleCurrentChange', this.pager)
      },
      indexC(i, index){
        this.pager = i
        this.currentPage = i-1
        if(this.pager > 6) this.currentPage = this.qu - 1
        this.$emit('handleCurrentChange', this.pager )
      },
      shang() {
        let i = this.currentPage--
        this.pager--
        if(this.pager == 7) this.currentPage = 5
        this.currentPage = this.pager -1
        this.$emit('handleCurrentChange', this.pager)
      },
      xia() {
        this.pager++
        if (this.pager < this.qu) {
          this.pager >6 ? this.currentPage = 5 : this.currentPage ++
          this.$emit('handleCurrentChange', this.pager)
        }
        if(this.pager == this.qu){
          this.currentPage = this.qu-1
          this.$emit('handleCurrentChange', this.pager-1)
        }

      },
      handleSizeChange(val) {
        this.$emit('handleSizeChange', val)
      },
      handleCurrentChange(val) {
        this.$emit('handleCurrentChange', val)
      },
      save() {
        if (this.Pages <= 0) this.Pages == 1

        this.$emit('handleCurrentChange', this.Pages)
        this.currentPage = this.Pages - 1
      }
    }
  }
</script>

<style scoped>
  .ioct {
    color: #333333;
    margin: 0 8px;
  }

  .btunc {
    padding: 8px 10px;
    border: 0.02667rem solid #DCDFE6;
    border-radius: 0.10667rem;
    font-size: 14px;
    background-color: #FFF;
  }

  button::after {
    border: none;
  }

  .btun {
    border: 0.02667rem solid #DCDFE6;
    border-radius: 0.10667rem;
    display: flex;
    justify-content: center;
    background-color: #FFF;
    align-items: center;
    font-size: 16px;
    padding: 5px 10px;
    /* height: 40px; */
    margin-right: 0.02667rem;
    cursor: pointer;

  }

  .inp {
    width: 30px;
    border: none;
    /* height: 40px; */
    font-size: 16px;
    text-align: center;
    outline: none;
  }

  .ico {
    width: ;
  }

  .el-button {
    font-size: 10px;
  }

  .active {
    background: #ff5722;
    color: #FFFFFF;
  }

  .io {
    display: flex;
    flex-direction: initial;
  }

  .el-button a {
    text-decoration: none;
    color: #666666;
  }

  .el-button a:hover {
    text-decoration: blink;
  }

  .apage {
    text-align: center;
    margin: 20px 0;
  }
</style>
